<template>
  <v-main class="full-height">
    <v-app-bar
        flat
        fixed
        align="center"
        height="60px"
    >
      <v-container >
        <v-row justify="center" class="py-0">
          <v-col cols="3" class="text-left pl-0">
            <v-btn icon @click="$router.back()" class="ml-n3" >
              <v-icon color="lighten-1" >mdi-arrow-left</v-icon>
            </v-btn>
          </v-col>
          <v-col cols="6">
            <div class="mt-3">
              设置
            </div>
          </v-col>
          <v-col cols="3"></v-col>
        </v-row>
      </v-container>
    </v-app-bar>
    <v-container class="mt-15 pa-0">
      <v-row justify="center" class="mt-5">
        <v-col cols="12" class="py-0">
          <v-list>
            <v-list-group prepend-icon="mdi-shield-account-outline">
              <template v-slot:activator>
                <v-list-item-content>
                  <v-list-item-title>账号与安全</v-list-item-title>
                </v-list-item-content>
              </template>

              <v-list-item class="ml-4" to="/setting/account">
                <v-list-item-icon>
                  <v-icon >
                    mdi-account-circle-outline
                  </v-icon>
                </v-list-item-icon>
                <v-list-item-content>
                  <v-list-item-title>妆典账号</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
              <v-list-item class="ml-4" to="/setting/ChangePhone">
                <v-list-item-icon>
                  <v-icon >
                    mdi-cellphone
                  </v-icon>
                </v-list-item-icon>
                <v-list-item-content>
                  <v-list-item-title>手机号码</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
              <v-list-item class="ml-4" to="/setting/changeEmail">
                <v-list-item-icon>
                  <v-icon >
                    mdi-mailbox-open-outline
                  </v-icon>
                </v-list-item-icon>
                <v-list-item-content>
                  <v-list-item-title>绑定邮箱</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
              <v-list-item class="ml-4" to="/setting/changePassword">
                <v-list-item-icon>
                  <v-icon >
                    mdi-lock-outline
                  </v-icon>
                </v-list-item-icon>
                <v-list-item-content>
                  <v-list-item-title class="py-0">修改密码</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
              <v-list-item class="ml-4" to="/admin/index" replace v-if="$store.getters.isAdmin">
                <v-list-item-icon>
                  <v-icon color="orange">
                    mdi-flask
                  </v-icon>
                </v-list-item-icon>
                <v-list-item-content>
                  <v-list-item-title class="py-0 orange--text">进入管理页面</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
              <v-list-item class="ml-4" @click="doLogOut">
                <v-list-item-icon>
                  <v-icon color="red">
                    mdi-logout-variant
                  </v-icon>
                </v-list-item-icon>
                <v-list-item-content>
                  <v-list-item-title class="py-0 red--text">退出登录</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-list-group>
            <v-list-group prepend-icon="mdi-information-outline">
              <template v-slot:activator>
                <v-list-item-content>
                  <v-list-item-title>关于妆典</v-list-item-title>
                </v-list-item-content>
              </template>

              <v-list-item>
                <v-list-item-content>
                  <v-container>
                  <v-row justify="center" >
                    <v-col cols="auto">
                      <v-card-title class="py-0">妆典APP</v-card-title>
                    </v-col>
                  </v-row>
                  <v-row justify="center"  class="py-0 mt-0">
                    <v-col cols="auto"  class="py-0">
                      <img src="../assets/index-logo.png" width="102" height="102">
                    </v-col>
                  </v-row>
                    <v-row justify="center"  class="py-0 mt-0">
                      <v-col cols="auto"  class="py-0">
                        copyright&copy;ZhangYanwen
                      </v-col>
                    </v-row>
                  </v-container>
                </v-list-item-content>
              </v-list-item>
            </v-list-group>
          </v-list>
        </v-col>
      </v-row>
    </v-container>
  </v-main>
</template>

<script>
export default {
  name: "Setting",
  data: () => ({
  }),
  methods:{
    doLogOut(){
      this.$store.commit('quit')
      this.$router.replace("/open")
    }
  }
}
</script>

<style scoped>
</style>
